<script lang="ts" setup>
import type { PageSchema } from '@epic-designer/types';

import { onMounted, ref } from 'vue';

import { EDesigner } from '@epic-designer/core';

// 引入组件工厂
import { ComponentManager, pluginManager } from '@epic-designer/utils'

// 引入 Mock 文件
const MockData = import('./mockComponents.json');

const designerRef = ref<InstanceType<typeof EDesigner>>();

// 加载模拟组件数据
onMounted(async () => {
  try {
    // 加载 mock 数据
    const mockData = await MockData;
    
    // 初始化组件管理器
    const componentManager = new ComponentManager();
    await componentManager.initialize();

    // 从 mock 数据中提取组件配置
    const componentConfigs = mockData.fields.map(field => ({
      type: field.fieldType,
      visible: field.isDraggable === 1
    }));

    // 更新组件可见性
    await componentManager.updateComponentVisibility(componentConfigs);

    // 注册组件到 pluginManager
    pluginManager.registerComponentsFromConfig(mockData.fields);
    console.log('组件池 === --- >',pluginManager.getComponents());
  } catch (error) {
    console.error('加载组件配置失败:', error);
  }
});


// 初始化的时候装载组件
/**
 * 1. 根据传过来的数据 然后校对一下数据结构生成一个满足 ED能够识别的组件结构
 * 2. 注册到 pluginmanager 上面去。⚠️ 注意实例的问题。
*/


/**
 * 点击保存按钮操作
 * @param e
 */
function handleSubmit(e: PageSchema) {
  console.log(e);
}
</script>
<template>
  <EDesigner ref="designerRef" title="EpicDesigner基础用法示例2222" @save="handleSubmit">
    <template #header-prefix>
      <div>欢迎使用EpicDesigner设计器12222</div>
    </template>
  </EDesigner>
</template>
